<template>
	<view class="drawer">
		<!-- <button @click="clickBtn">点击</button> -->
		<!-- self可以理解为跳过冒泡事件，即捕获事件在该元素上发生的方法。 -->
		<view class="background" v-if="open" @click.self="closeDrop">
			<view class="drop" :class="{ close: isClose ,'drawer-open': open }">
				<view class="head">
					<view class="text">
						升级终身会员
					</view>
					<uni-icons @click="closeDrop" class="icon" type="closeempty" size="24"></uni-icons>
				</view>
				<view class="line-through">
					原价￥ {{data.user.vip_price_yuanjia}}
				</view>
				<view class="line3">
					<view class="line3-num">
						<view class="fh">
							￥
						</view>
						<view class="sz">
							{{data.user.vip_price}}
						</view>
					</view>
					<view class="line3-text">
						终身会员
					</view>
				</view>
				<view class="line4">
					<img class="img" src="/static/newImg/container5.png" />
					<view class="cont">
						<view class="text1">
							无限数量
						</view>
						<view class="text2">
							无限制添加资产数量
						</view>
					</view>
				</view>
				<view class="line4">
					<img class="img" src="/static/newImg/container6.png" />
					<view class="cont">
						<view class="text1">
							终身会员
						</view>
						<view class="text2">
							一次付费永久使用
						</view>
					</view>
				</view>
				<view class="line4">
					<img class="img" src="/static/newImg/container7.png" />
					<view class="cont">
						<view class="text1">
							抢先功能
						</view>
						<view class="text2">
							多端设备数据同步更新
						</view>
					</view>
				</view>
				<view class="line4">
					<img class="img" src="/static/newImg/wximg.png" />
					<view class="cont">
						<view class="text1">
							会员服务
						</view>
						<view class="text2">
							加入到我们的会员群
						</view>
					</view>
				</view>
				<view class="btncont">
					<button class="btn" @click="upgrade">立即升级</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['open', 'data'],
		data() {
			return {
				isClose: false,
				successFlag: false
			}
		},
		watch: {
			successFlag: {
				handler(newVal, oldVal) {
					console.log(newVal, oldVal);
					if (newVal == true) {
						this.$emit('isClose')
					}
				}
			}
		},
		methods: {
			upgrade() {
				this.$api.go_payApi({}).then(res => { //调用封装的api
					console.log(res, '1234'); //返回结果
					if (res.code == 1) {
						this.getData(res.result)
					}
				})

			},
			getData(data) {
				uni.requestPayment({
					provider: 'wxpay',
					appid: data.appId,
					timeStamp: data.timeStamp, // 当前的时间
					nonceStr: data.nonceStr, //随机字符串，长度为32个字符以下
					package: data.package, //统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=xx。
					signType: data.signType, //签名算法，应与后台下单时的值一致
					paySign: data.paySign, // 签名
					success: (res) => {
						console.log(res);
						// 支付成功后的逻辑
						uni.showToast({
							title: '支付成功',
							icon: 'success'
						});
						this.$emit('isClose')
						// this.successFlag = true
					},
					fail(err) {
						// 支付失败后的逻辑
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						});
					}
				});
			},
			// 控制点击遮罩关闭抽屉
			closeDrop() {
				this.isClose = true;
				setTimeout(() => {
					this.$emit('isClose')
				}, 200);
			}
		},
	}
</script>
<style scoped lang="scss">
	.background {
		// z-index 控制是全屏还是半屏，即是否占顶部导航栏的位置
		z-index: 9999;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		// 遮罩颜色
		background: rgba($color: #000000, $alpha: 0.5);
		// transition: bottom 0.3s ease-in-out;


		.drop {
			width: 100%;
			position: fixed;
			top: auto;
			bottom:0;
			right: 0;
			background: #fff;
			border-radius: 14px 14px 0px 0px;

			.head {
				margin: 15px 0 8px 0;
				position: relative;

				.icon {
					position: absolute;
					right: 14px;
					top: 0;
				}

				.text {
					font-family: 'Roboto';
					font-weight: 500;
					font-size: 21px;
					color: #3D3D3D;
					text-align: center;
				}
			}

			.line-through {
				text-decoration: line-through;
				text-align: center;
				font-family: 'Roboto';
				font-weight: 500;
				font-size: 14px;
				color: #ABB4BA;
			}

			.line3 {
				margin-top: 15px;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;

				&-num {
					display: flex;

					.fh {
						font-size: 14px;
						color: #637BE9;
					}

					.sz {
						font-family: PingFang HK, PingFang HK;
						font-weight: 600;
						font-size: 18px;
						color: #637BE9;
					}

				}

				&-text {
					margin-left: 10px;
					font-family: 'Roboto';
					font-weight: 500;
					font-size: 14px;
					color: #ABB4BA;
				}

			}

			.line4 {
				margin-top: 25px;
				display: flex;
				// justify-content: center;
				align-items: center;
				padding-left: 28%;

				.img {
					width: 34px;
					height: 34px;
					margin: 0 15px;
				}

				.cont {
					display: flex;
					flex-direction: column;

					.text1 {
						font-family: Roboto, Roboto;
						font-weight: 500;
						font-size: 14px;
						color: #5E5E5E;
					}

					.text2 {
						font-family: Roboto, Roboto;
						font-weight: 400;
						font-size: 14px;
						color: #ABB4BA;
						white-space: pre;
					}
				}
			}

			.btncont {
				padding: 20px;
				

				.btn {
					color: #fff;
					background: linear-gradient(180deg, #637BE9 0%, #637BE9 100%);
				}
			}
		}

		/* 当屏幕宽度小于等于390px时应用此样式 */
		@media screen and (max-width: 390px) {
			.drop {
				width: 100%;
				right: 0;
				background: #fff;
				border-radius: 14px 14px 0px 0px;
			}
		}

		/* 当屏幕宽度大于430px时应用此样式 */
		@media screen and (min-width: 430px) {
			.drop {
				width: 100%;
				right: 0;
				background: #fff;
				border-radius: 14px 14px 0px 0px;
			}
		}

		.drawer-open {
			bottom: 0;
			/* 打开时位置在屏幕底部 */
		}

		// 开
		.active {
			animation: bottom 0.5s normal forwards;
		}

		// @keyframes 可以创建动画；
		// opendoor对应上方active类中animation属性的opendoor
		// @keyframes opendoor {
		// 	from {
		// 		width: 0;
		// 	}

		// 	to {
		// 		//打开的抽屉宽度
		// 		width: 66%;
		// 	}
		// }

		// // 关
		// .close {
		// 	animation: close 0.3s normal forwards;
		// }

		// // close对应上方close类中animation属性的 close
		// @keyframes close {
		// 	0% {
		// 		width: 66%;
		// 	}

		// 	100% {
		// 		width: 0;
		// 		opacity: 0;
		// 	}
		// }
	}
</style>